import React, { useState } from 'react';
import {
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import './SideMenu.scss';
import bar from '../../images/touxiang.jpg';


const SideMenu = () => (
    <div className='SideMenu'>
        <div className='SideMenuHeader'>
            <img className='barImg' src={bar}></img>
        </div>
        <Menu
            // theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            items={[
                {
                    key: '1',
                    icon: <UserOutlined />,
                    label: '文章',
                },
                {
                    key: '2',
                    icon: <VideoCameraOutlined />,
                    label: '归档',
                },
                {
                    key: '3',
                    icon: <UploadOutlined />,
                    label: '日记',
                },
                {
                    key: '4',
                    icon: <UploadOutlined />,
                    label: 'TODO',
                },
                {
                    key: '5',
                    icon: <UploadOutlined />,
                    label: '留言板',
                },
                {
                    key: '6',
                    icon: <UploadOutlined />,
                    label: '关于',
                },
                {
                    key: '7',
                    icon: <UploadOutlined />,
                    label: '开往',
                },
            ]}
        />

        <div className='SideMenuFoot'>
            <div className='MenuItem'>
                🎧
            </div>
        </div>
    </div>
)

export default SideMenu